<template>
  <div>
    <div>
      <CnBoldP class="mt-11 text-20">数据滚播</CnBoldP>

      <CnNormalP class="mt-6 mb-20 text-4xText">
        展示设备所监测到的实时数据指标。数据超出表格高度后，会滚动播放表格数据，且循环。
      </CnNormalP>
      <a-card class="card_header_box" style="z-index: 1" :loading="isTableLoading">
        <div class="search_box flex">
          <div class="search_item">
            <span>设备名称</span>
            <!-- <a-input class="w-220 ml-10" v-model="scrollTableFormData.devName"></a-input> -->
            <a-select
              allowClear
              v-model:value="scrollTableFormData.devName"
              class="w-220 ml-10"
              show-search
              :fieldNames="{
                label: 'devName',
                value: 'devName'
              }"
              placeholder="请选择设备"
              style="width: 200px"
              :options="tableDataSourceCopy"
              @change="searchDevNameChange"
            >
            </a-select>
          </div>
          <div class="search_btn_box ml-30">
            <!-- <a-button type="primary" @click="scrollTableSearchClick"> 查询 </a-button> -->
          </div>
        </div>
      </a-card>
      <a-card class="card_table_box" style="padding: 0px; margin-top: 20px">
        <a-table
          class="ant-table-striped scroll_table"
          :ref="reportTable"
          :dataSource="showTableDataSource"
          :pagination="false"
          :scroll="{x: 1500, y: 550}"
          style="overflow: auto; z-index: 2"
          :columns="showTableColumns"
          :loading="isTableLoading"
        >
          <template #param1="{text}">
            <a-tooltip>
              <template #title>
                <span
                  >{{ tableParamDataList[0].paramName }} ：{{ isNullStatusShowFunc(text) }} ({{
                    isNullStatusShowFunc(tableParamDataList[0].paramUnit)
                  }})</span
                >
              </template>
              <span>{{ isNullStatusShowFunc(text) }}</span>
            </a-tooltip>
          </template>
          <template #param2="{text}">
            <a-tooltip>
              <template #title>
                <span
                  >{{ tableParamDataList[1].paramName }} ：{{ isNullStatusShowFunc(text) }} ({{
                    isNullStatusShowFunc(tableParamDataList[1].paramUnit)
                  }})</span
                >
              </template>
              <span>{{ isNullStatusShowFunc(text) }}</span>
            </a-tooltip>
          </template>
          <template #param3="{text}">
            <a-tooltip>
              <template #title>
                <span
                  >{{ tableParamDataList[2].paramName }} ：{{ isNullStatusShowFunc(text) }} ({{
                    isNullStatusShowFunc(tableParamDataList[2].paramUnit)
                  }})</span
                >
              </template>
              <span>{{ isNullStatusShowFunc(text) }}</span>
            </a-tooltip>
          </template>
          <template #param4="{text}">
            <a-tooltip>
              <template #title>
                <span
                  >{{ tableParamDataList[3].paramName }} ：{{ isNullStatusShowFunc(text) }} ({{
                    isNullStatusShowFunc(tableParamDataList[3].paramUnit)
                  }})</span
                >
              </template>
              <span>{{ isNullStatusShowFunc(text) }}</span>
            </a-tooltip>
          </template>
          <template #param5="{text}">
            <a-tooltip>
              <template #title>
                <span
                  >{{ tableParamDataList[4].paramName }} ：{{ isNullStatusShowFunc(text) }} ({{
                    isNullStatusShowFunc(tableParamDataList[4].paramUnit)
                  }})</span
                >
              </template>
              <span>{{ isNullStatusShowFunc(text) }}</span>
            </a-tooltip>
          </template>
          <template #param6="{text}">
            <a-tooltip>
              <template #title>
                <span
                  >{{ tableParamDataList[5].paramName }} ：{{ isNullStatusShowFunc(text) }} ({{
                    isNullStatusShowFunc(tableParamDataList[5].paramUnit)
                  }})</span
                >
              </template>
              <span>{{ isNullStatusShowFunc(text) }}</span>
            </a-tooltip>
          </template>
          <template #param7="{text}">
            <a-tooltip>
              <template #title>
                <span
                  >{{ tableParamDataList[6].paramName }} ：{{ isNullStatusShowFunc(text) }} ({{
                    isNullStatusShowFunc(tableParamDataList[6].paramUnit)
                  }})</span
                >
              </template>
              <span>{{ isNullStatusShowFunc(text) }}</span>
            </a-tooltip>
          </template>
          <template #param8="{text}">
            <a-tooltip>
              <template #title>
                <span
                  >{{ tableParamDataList[7].paramName }}：{{ isNullStatusShowFunc(text) }} ({{
                    isNullStatusShowFunc(tableParamDataList[7].paramUnit)
                  }})</span
                >
              </template>
              <span>{{ isNullStatusShowFunc(text) }}</span>
            </a-tooltip>
          </template>
          <template #param9="{text}">
            <a-tooltip>
              <template #title>
                <span
                  >{{ tableParamDataList[8].paramName }} ：{{ isNullStatusShowFunc(text) }} ({{
                    isNullStatusShowFunc(tableParamDataList[8].paramUnit)
                  }})</span
                >
              </template>
              <span>{{ isNullStatusShowFunc(text) }}</span>
            </a-tooltip>
          </template>
          <template #param10="{text}">
            <a-tooltip>
              <template #title>
                <span
                  >{{ tableParamDataList[9].paramName }}：{{ isNullStatusShowFunc(text) }} ({{
                    isNullStatusShowFunc(tableParamDataList[9].paramUnit)
                  }})</span
                >
              </template>
              <span>{{ isNullStatusShowFunc(text) }}</span>
            </a-tooltip>
          </template>
        </a-table>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts">
  import {defineComponent, ref, onMounted, nextTick} from 'vue'
  // import {test} from 'node:test'
  export default defineComponent({
    name: 'DataRotarySeeding'
  })
</script>
<script lang="ts" setup>
  // 引入
  import common from '@/utils/common.js'
  import {selectDataCarouseApi} from '@/api/dataRotarySeeding'
  import {CnBoldP, CnNormalP} from '@/components/text'
  import {getUserId} from '@/libs/auth'
  import {
    devDataCarouseRspParam,
    devDataCarouseRspParamList,
    devDataCarouseRsp,
    devDataCarouseRspList
  } from './type.ts'

  // 表格是否是加载状态的标识
  const isTableLoading = ref(false)

  // 搜索选择输入框的change事件
  const searchDevNameChange = () => {
    console.log(scrollTableFormData.value.devName)
    if (scrollTableFormData.value.devName != '' && scrollTableFormData.value.devName != undefined) {
      let newArr: any = []
      tableDataSourceCopy.value.forEach((item: any) => {
        if (item.devName == scrollTableFormData.value.devName) {
          newArr.push(item)
        }
      })
      showTableDataSource.value = newArr
    } else {
      showTableDataSource.value = tableDataSourceCopy.value
    }
  }

  // 查询的点击事件
  const scrollTableSearchClick = () => {
    console.log('查询')
  }
  // 搜索框的数据
  const scrollTableFormData = ref({
    devName: ''
  })

  const reportTable = ref('')

  // 滚播数据表格数据
  const showTableDataSource = ref([])

  // 备份表格数据
  const tableDataSourceCopy = ref([])
  // 表格字段规则数据
  const showTableColumns = ref([
    {
      title: '设备名称',
      dataIndex: 'devName',
      align: 'center',
      width: 220
    },
    {
      title: '水质等级',
      dataIndex: 'devType',
      align: 'center',
      width: 120
    },
    {
      title: '水质类型',
      dataIndex: 'waterQualityType',
      align: 'center'
    },
    {
      title: '检测时间',
      dataIndex: 'monitoringStatus',
      align: 'center',
      width: 180
    }
  ])

  // 参数单位数据
  const tableParamDataList = ref([])

  // 获取滚播表格数据的请求函数
  const getRotarySeedingTableDataFunc = async () => {
    isTableLoading.value = true
    let platFormSubUserId = getUserId()
    const res = await selectDataCarouseApi({platFormSubUserId: Number(platFormSubUserId)})
    console.log(res)
    disposeSeedingTableDataFunc(res.data.paramNameList, res.data.devDataCarouseRspList)
    isTableLoading.value = false
  }

  // 处理滚播表格数据的函数
  const disposeSeedingTableDataFunc = (
    paramNameList: string[],
    devDataCarouseRspList: devDataCarouseRspList
  ) => {
    console.log(paramNameList)
    console.log(devDataCarouseRspList)

    // 参数单位数据
    const paramDataList: any = []

    // 处理表头表格规则数据
    paramNameList.forEach((item: string, index: number) => {
      showTableColumns.value.push({
        title: item,
        dataIndex: 'param' + ++index,
        align: 'center',
        key: 'param' + index,
        slots: {
          customRender: 'param' + index
        }
      })
      tableParamDataList.value.push()
      paramDataList.push({
        paramName: item,
        paramUnit: ''
      })
    })
    tableParamDataList.value = paramDataList

    console.log(tableParamDataList.value)

    console.log(showTableColumns.value)

    // 处理表格显示数据
    let newTableData: any = []
    devDataCarouseRspList.forEach((item: devDataCarouseRsp, index: number) => {
      let newTableDataObj: any = {}
      if (
        item.checkDataList == null ||
        item.checkDataList == undefined ||
        item.checkDataList.length == 0
      ) {
      } else {
        for (let i = 0; i < item.checkDataList.length; i++) {
          for (let j = 0; j < paramNameList.length; j++) {
            if (item.checkDataList[i].checkDataName == paramNameList[j]) {
              switch (j) {
                case 0:
                  newTableDataObj.param1 = item.checkDataList[i].checkDataValue
                  tableParamDataList.value[j].paramUnit = item.checkDataList[i].checkDataUnit
                  break
                case 1:
                  newTableDataObj.param2 = item.checkDataList[i].checkDataValue
                  tableParamDataList.value[j].paramUnit = item.checkDataList[i].checkDataUnit
                  break
                case 2:
                  newTableDataObj.param3 = item.checkDataList[i].checkDataValue
                  tableParamDataList.value[j].paramUnit = item.checkDataList[i].checkDataUnit
                  break
                case 3:
                  newTableDataObj.param4 = item.checkDataList[i].checkDataValue
                  tableParamDataList.value[j].paramUnit = item.checkDataList[i].checkDataUnit
                  break
                case 4:
                  newTableDataObj.param5 = item.checkDataList[i].checkDataValue
                  tableParamDataList.value[j].paramUnit = item.checkDataList[i].checkDataUnit
                  break
                case 5:
                  newTableDataObj.param6 = item.checkDataList[i].checkDataValue
                  tableParamDataList.value[j].paramUnit = item.checkDataList[i].checkDataUnit
                  break
                case 6:
                  newTableDataObj.param7 = item.checkDataList[i].checkDataValue
                  tableParamDataList.value[j].paramUnit = item.checkDataList[i].checkDataUnit
                  break
                case 7:
                  newTableDataObj.param8 = item.checkDataList[i].checkDataValue
                  tableParamDataList.value[j].paramUnit = item.checkDataList[i].checkDataUnit
                  break
                case 8:
                  newTableDataObj.param9 = item.checkDataList[i].checkDataValue
                  tableParamDataList.value[j].paramUnit = item.checkDataList[i].checkDataUnit
                  break
                case 9:
                  newTableDataObj.param10 = item.checkDataList[i].checkDataValue
                  tableParamDataList.value[j].paramUnit = item.checkDataList[i].checkDataUnit
                  break
                default:
                  break
              }
            }
          }
        }
      }

      console.log(tableParamDataList.value)

      newTableData.push(newTableDataObj)
      console.log(newTableDataObj)
    })
    console.log(newTableData)
    newTableData.forEach((item: any, index: number) => {
      console.log(item)
      item.devName = devDataCarouseRspList[index].devName
      item.devType = devDataCarouseRspList[index].waterLevel
      item.waterQualityType = devDataCarouseRspList[index].industryName
      item.monitoringStatus = devDataCarouseRspList[index].devCheckTime
    })
    showTableDataSource.value = newTableData
    tableDataSourceCopy.value = newTableData
  }

  // 空状态显示 -- 的函数
  const isNullStatusShowFunc = (str: any) => {
    return str != '' && str != null && str != undefined ? str : '--'
  }
  // 初始化
  onMounted(() => {
    getRotarySeedingTableDataFunc()

    nextTick(() => {
      common.scrollUp(reportTable.value)
    })
  })
</script>

<style lang="less" scoped>
  .simple_card_box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .card_table_box .ant-card-body {
    padding: 0px;
  }

  .ant-table td {
    white-space: nowrap;
  }

  ::v-deep .card_table_box .ant-card-body {
    padding: 0px;
  }
</style>
